<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/public.css" media="all" />

	<link rel="stylesheet" href="/layui/css/formSelects-v4.css">
	<script src="/layui/layui.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/layui/layui.js"></script>

	<script src="/js/config.js"></script>
</head>
<body >
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>耗材管理</legend>
</fieldset>
<div class="layui-tab layui-tab-card">
	<ul class="layui-tab-title">
		<li class="layui-this">入库记录</li>
		<li>出库记录</li>
		<li>库存记录</li>
	</ul>
	<div class="layui-tab-content" style="height: 600px;">
		<div class="layui-tab-item layui-show">
			<form class="layui-form">
				<div style="margin-top: 20px">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" id="stname" autocomplete="off" class="layui-input">
					</div>

					<button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>
				</div>
			</form>
			<table class="layui-table" lay-filter="roleTable" lay-data="{id:'roleTable',text:{none:'没有要显示的数据'},url:'http://localhost:8888/stock/list',page:true,even:true,toolbar:'#toolbarDemo',defaultToolbar:['filter', 'print', 'exports']}">
				<thead>
				<th lay-data="{type:'radio'}"></th>
				<th lay-data="{field:'stid'}">耗材编号</th>
				<th lay-data="{field:'stname'}">耗材名称</th>
				<th lay-data="{field:'sttime'}">采购时间</th>
				<th lay-data="{field:'stall'}">入库数目</th>
				<th lay-data="{field:'supplier'}">供应商</th>
				<th lay-data="{field:'stmoney'}">采购价格</th>
				<th lay-data="{field:'stis'}">批次</th>
				<th lay-data="{toolbar: '#barDemo'}">操作</th>
				</thead>
			</table>
		</div>
		<div class="layui-tab-item">
			<form class="layui-form">
				<div style="margin-top: 20px">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" id="cpery" autocomplete="off" class="layui-input">
					</div>

					<button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>
				</div>
			</form>

			<table class="layui-table" lay-filter="roleTable" lay-data="{id:'roleTable',text:{none:'没有要显示的数据'},url:'http://localhost:8888/stock/list',page:true,even:true,toolbar:'#toolbarDemo',defaultToolbar:['filter', 'print', 'exports']}">
				<thead>
				<th lay-data="{type:'radio'}"></th>
				<th lay-data="{field:'stid'}">耗材编号</th>
				<th lay-data="{field:'stname'}">耗材名称</th>
				<th lay-data="{field:'ctime'}">出库时间</th>
				<th lay-data="{field:'cfre'}">售价</th>
				<th lay-data="{field:'cpery'}">出售人</th>
				<th lay-data="{field:'cpi'}">出售批次</th>
				<th lay-data="{toolbar: '#barDemo'}">操作</th>
				</thead>
			</table>
		</div>
		<div class="layui-tab-item">

			<table class="layui-table" lay-filter="roleTable" lay-data="{id:'roleTable',text:{none:'没有要显示的数据'},url:'http://localhost:8888/stock/list',page:true,even:true,toolbar:'#toolbarDemo',defaultToolbar:['filter', 'print', 'exports']}">
				<thead>
				<th lay-data="{type:'radio'}"></th>
				<th lay-data="{field:'stid'}">耗材编号</th>
				<th lay-data="{field:'stname'}">耗材名称</th>
				<th lay-data="{field:'cpi'}">库存数量</th>
				</thead>
			</table>
		</div>
	</div>
</div>


<script>
    var table,select ;
    function reloadData() {
        table.reload("roleTable", {
            page: {
                curr: 1
            },
            where: {
                stname: $("#stname").val(),
                cpery: $("#cpery").val()
            }
        });
    }
    layui.config({
        base: '/layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['form','table','laytpl','formSelects','element'],function() {
        var form = layui.form;
        table = layui.table;
        var laytpl = layui.laytpl;
        select = layui.formSelects;
        var element = layui.element;

        //监听单选按钮事件
        table.on('radio(roleTable)', function(obj){
            stid = obj.data.stid;
            loadPerTree(obj.data.stid);
        });

    //头工具栏事件
    table.on('toolbar(roleTable)', function(obj){
        switch(obj.event){
            case 'batchDelete': //批量删除
                                //获取选中行
                var checkStatus = table.checkStatus(obj.config.stid);
                var data = checkStatus.data;
                if(data.length == 0){
                    layer.msg('请选择要删除的数据行');
                    return;
                }
                layer.confirm("确定要删除选中的数据吗？",function (index) {
                    var p = "?";
                    for(let role of data){
                        p += `id=${role.stid}&`;
                    }

                    $.post(`http://localhost:8888/role/batchDelete${p}`,d => {
                        layer.close(index);
                        table.reload("roleTable");
                    });
                })
                break;
            case 'add':
                $.get('add.html',function (data) {
                    layer.open({
                        title: '添加角色',
                        type:1,
                        anim:4,
                        skin:'layui-layer-molv',
                        area:'500px',
                        content:data,
                        maxmin:true,
                        btn : ['确定','取消'],
                        yes : function () {
                            var str = $("#add_role_form").serialize();
                            $.post(`${new Config().base_url}/role/add`,str,function (data) {
                                layer.close(layer.index);
                                table.reload('roleTable');
                            });

                        }
                    });
                });
                break;
            case 'isAll':
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;
        };
    });


        //监听行内的工具条
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    $.post("http://localhost:8888/role/delete",{roleid: data.roleid}, function (d) {
                        table.reload("roleTable", {
                            page: {
                                curr: 1
                            }
                        });
                    });
                });
            } else if (layEvent === 'edit') {//TODO 编辑
                    $.get('add.html',function (s) {
                        layer.open({
                            type : 1,
                            title : '修改用户',
                            area:'800px',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                //对表单回填数据
                                data.locked = data.locked == 0 ? null : data.locked;
                                form.val('roleForm',data);
                                var t =setInterval(function () {
                                    console.log("waiting....");

                                },100)

                            },
                            yes : function () {

                                var str = $("#add_role_form").serialize();
                                $.post(`${new Config().base_url}/role/update`,str,function (data) {
                                    layer.close(layer.index);
                                    table.reload('roleTable');

                                })

                            }
                        })
                    })

            } else if (layEvent === 'detail') { //TODO 查看详情

            }
        });
		});




</script>
<script>



</script>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>

	</div>
</script>

<script type="text/html" id="barDemo">
	<a href="javascript:void(0)" lay-event="detail"><i class="layui-icon layui-icon-app">查看</i></a>
</script>






</body>
</html>